<template>
  <drawer-panel v-model="dialogVisible" title="监测项目" size="882px">
    <form-panel :ok-click="submitForm">
      <!--<card-panel :shadow="false">

      </card-panel>-->
      <div style="position:absolute;inset: 15px;">
        <div class="layout-flex-avg">
          <div class="layout-flex-avg-center" style="width:245px;flex: none;position: relative">
            <div class="margin-bottom-15">
              <add-button :on-click="handleAddClick"></add-button>
            </div>
            <div style="position: absolute;inset: 30px 0 0 0;width: 100%;">
              <list-view :list="rows" :click-row="handleClickRow">
                <template #title="{ row }">
                  <div style="position:relative;">
                    {{ row.monitorFactorName }}
                    <div style="position: absolute;right:18px;top: 2px;overflow: hidden;">
                      <el-link :underline="false" @click="delRow(row)">
                        <i class="el-icon-delete"></i>
                      </el-link>
                    </div>
                  </div>
                </template>
              </list-view>
            </div>
          </div>
          <div class="v-line margin-left-15 margin-right-5"></div>
          <div class="layout-flex-avg-center">
            <el-form ref="elForm" :model="queryObj" :rules="rules" label-width="165px" label-suffix="：" size="medium">
              <el-form-item label="监测项目名称" prop="monitorFactorCode">
                <el-select
                  v-model="queryObj.monitorFactorCode"
                  placeholder="请选择监测项目名称"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in monitorFactorCodeOptions"
                    :key="index"
                    :label="item.text"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!--<el-form-item label="监测项目编码" prop="monitorFactorCode">
                <el-input
                  v-model="queryObj.monitorFactorCode"
                  placeholder="请输入监测项目编码"
                  clearable
                  readonly
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>-->
              <el-form-item label="超标上限" prop="exceedMaxLimit">
                <el-input
                  v-model="queryObj.exceedMaxLimit"
                  placeholder="请输入超标上限"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="超标下限" prop="exceedMinLimit">
                <el-input
                  v-model="queryObj.exceedMinLimit"
                  placeholder="请输入超标下限"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="排放标准" prop="emissionStandard">
                <el-input
                  v-model="queryObj.emissionStandard"
                  placeholder="请输入排放标准"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input
              ></el-form-item>
              <el-form-item label="数据精度" prop="numLimit">
                <el-input v-model="queryObj.numLimit" placeholder="请输入数据精度" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
              <el-form-item label="备注" prop="mark">
                <el-input
                  v-model="queryObj.mark"
                  type="textarea"
                  placeholder="请输入备注"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </form-panel>
  </drawer-panel>
</template>

<script>
import {
  factorDelete,
  factorFindMonitorFactor,
  factorSaveOrUpdate,
  pollutantDelete,
  pollutantFindList
} from '@/api/commonApi'

const isNum = (rule, value, callback) => {
  const age = /^[0-9]+([.]{1}[0-9]+){0,1}$/
  if (!age.test(value)) {
    // rule.message = '请输入数字'
    callback(new Error('请输入数字'))
  } else {
    callback()
  }
}
export default {
  name: 'FactorsInput',
  props: {
    // 站点编码
    pointCode: {
      type: String,
      default: ''
    },
    // 站点编码
    monitorType: {
      type: String,
      default: 'airtype'
    }
  },
  data() {
    return {
      dialogVisible: false,
      rows: [],
      queryObj: {
        eqId: '',
        id: undefined,
        monitorFactorName: undefined,
        monitorFactorCode: undefined,
        exceedMaxLimit: undefined,
        exceedMinLimit: undefined,
        numLimit: undefined,
        emissionStandard: undefined,
        mark: undefined
      },
      rules: {
        monitorFactorCode: [
          {
            required: true,
            message: '请选择监测项目名称',
            trigger: 'change'
          }
        ],
        exceedMaxLimit: [
          {
            required: true,
            message: '请输入超标上限',
            trigger: 'blur'
          }
        ],
        exceedMinLimit: [
          {
            required: true,
            message: '请输入超标下限',
            trigger: 'blur'
          }
        ],
        numLimit: [
          {
            required: true,
            message: '请输入数据精度',
            trigger: 'blur'
          }
        ],
        emissionStandard: [
          {
            required: true,
            message: '请输入排放标准',
            trigger: 'blur'
          }
        ],
        mark: [
          {
            // required: true,
            message: '请输入备注',
            trigger: 'blur'
          }
        ]
      },
      monitorFactorCodeOptions: []
    }
  },
  methods: {
    init() {
      const { monitorType, pointCode } = this
      // 获取监测项目下拉
      pollutantFindList({ monitorType, pointCode }).then(res => {
        this.monitorFactorCodeOptions = res
      })
    },
    open(record) {
      this.dialogVisible = true
      // 监测设备id
      this.queryObj.eqId = record.id
      this.fetchList()
      this.init()
      // Object.assign(this.queryObj, {
      //   pointName: undefined,
      //   address: undefined,
      //   areaCode: undefined,
      //   longitude: undefined,
      //   latitude: undefined,
      //   standLevelCode: undefined,
      //   coverage: undefined,
      //   functionTypeCode: undefined,
      //   buildDate: undefined,
      //   field113: undefined,
      //   linkMan: undefined,
      //   linkPhone: undefined,
      //   logoutStatus: undefined
      // })
      // if (record) {
      //   Object.assign(this.queryObj, record)
      // }
    },
    close() {
      this.dialogVisible = false
    },
    submitForm() {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // TODO 提交表单
        const queryObj = this.queryObj
        const filter = this.monitorFactorCodeOptions.filter(item => item.value == queryObj.monitorFactorCode)
        queryObj.monitorFactorName = filter.length > 0 ? filter[0].text : ''
        factorSaveOrUpdate(queryObj).then(res => {
          this.$message({
            message: `操作成功`,
            type: 'success'
          })
          // this.success()
          // this.close()
          this.fetchList()
          this.handleAddClick()
        })
      })
    },
    resetForm() {
      this.$refs.elForm.resetFields()
    },
    handleAddClick() {
      Object.assign(this.queryObj, {
        id: undefined,
        monitorFactorName: undefined,
        monitorFactorCode: undefined,
        exceedMaxLimit: undefined,
        exceedMinLimit: undefined,
        numLimit: undefined,
        emissionStandard: undefined,
        mark: undefined
      })
    },
    handleClickRow(row) {
      Object.assign(this.queryObj, row)
    },
    // 删除监测项目
    delRow(row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        factorDelete({ id: row.id }).then(res => {
          this.$message({
            message: `操作成功`,
            type: 'success'
          })
          this.fetchList()
        })
      })
    },
    // 获取监测项目列表
    fetchList() {
      const eqId = this.queryObj.eqId
      const { monitorType, pointCode } = this
      factorFindMonitorFactor({ eqId, monitorType, pointCode }).then(res => {
        this.rows = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
